浏览器扩展开发：掌握 Manifest V3 和 JavaScript API

浏览器扩展提供了一种强大的方式来增强和定制浏览体验。它们允许开发者向网页浏览器添加功能，与网页交互，并与 Web 服务集成。本指南全面概述了浏览器扩展开发，重点关注 Manifest V3 和驱动这些扩展的核心 JavaScript API。

理解浏览器扩展

浏览器扩展是一个小型软件程序，用于扩展网页浏览器的功能。扩展可以修改网页，添加新功能，并与外部服务集成。它们通常用 JavaScript、HTML 和 CSS 编写，并打包成一个 ZIP 文件，其中包含一个描述扩展元数据和权限的 manifest 文件。

浏览器扩展的常见用例包括：

• 广告拦截器：从网页中移除广告。
• 密码管理器：安全地存储和管理密码。
• 生产力工具：通过任务管理和笔记记录等功能增强工作流程。
• 内容定制：修改网页的外观和行为。
• 可访问性工具：为残障用户提高 Web 可访问性。

Manifest V3：新标准

Manifest V3 是浏览器扩展 manifest 文件（一个描述扩展元数据、权限和资源的 JSON 文件）的最新版本。它对扩展开发过程进行了重大更改，主要侧重于提高安全性、隐私性和性能。Manifest V3 中的主要变化包括：

• Service Workers：用 Service Workers 替换后台页面，以提高性能并减少内存消耗。Service Workers 是事件驱动的脚本，在后台运行并处理网络请求和闹钟等事件。
• Declarative Net Request API：用 Declarative Net Request API 替换阻塞式 webRequest API 来过滤网络请求。这通过限制扩展对网络流量的访问来增强隐私和安全性。
• Content Security Policy (CSP)：强制执行更严格的 CSP 策略，以防止执行任意代码并减轻安全风险。
• Manifest Version：manifest.json 文件中的 manifest_version 键必须设置为 3。

从 Manifest V2 迁移到 Manifest V3

从 Manifest V2 迁移到 Manifest V3 需要仔细规划和代码修改。以下是分步指南：

1. 更新 manifest 文件：将 manifest_version 设置为 3，并更新 permissions 和 background 字段以符合 Manifest V3 的要求。
2. 用 Service Workers 替换后台页面：将后台脚本重写为 Service Workers，使用 chrome.scripting 和 chrome.alarms API 处理事件。
3. 迁移到 Declarative Net Request API：用 declarativeNetRequest API 中定义的声明性规则替换阻塞式 webRequest API 调用。
4. 更新 Content Security Policy：调整 manifest 文件中的 content_security_policy 字段以符合更严格的 CSP 要求。
5. 全面测试：在不同浏览器中全面测试扩展，以确保兼容性和正常功能。

示例：将后台脚本迁移到 Service Worker

Manifest V2 (background.js)：

            chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    return {cancel: true};
  },
  {urls: ["*.example.com/*"]},
  ["blocking"]
);

            

              
                Copy
              
            
          

Manifest V3 (service-worker.js)：

            chrome.declarativeNetRequest.updateDynamicRules({
  removeRuleIds: [1],
  addRules: [{
    "id": 1,
    "priority": 1,
    "action": { "type": "block" },
    "condition": { "urlFilter": "*.example.com/*", "resourceTypes": ["main_frame", "sub_frame", "stylesheet", "script", "image", "object", "xmlhttprequest", "other"] }
  }]
});

            

              
                Copy
              
            
          

manifest.json (Manifest V3)：

            {
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "description": "A simple extension",
  "permissions": [
    "declarativeNetRequest",
    "declarativeNetRequestFeedback",
    "storage"
  ],
  "background": {
    "service_worker": "service-worker.js"
  },
  "declarative_net_request": {
    "rule_resources": [{
      "id": "ruleset_1",
      "enabled": true,
      "path": "rules.json"
    }]
  }
}

            

              
                Copy
              
            
          

浏览器扩展必备 JavaScript API

浏览器扩展依赖一套 JavaScript API 来与浏览器和网页进行交互。以下是一些最重要的 API：

1. chrome.runtime

chrome.runtime API 提供对扩展运行时环境的访问。它允许扩展与后台脚本通信，访问 manifest 文件，并管理扩展的生命周期。

关键方法：

• chrome.runtime.sendMessage()：向后台脚本或其他扩展发送消息。
• chrome.runtime.onMessage.addListener()：监听来自其他脚本的消息。
• chrome.runtime.getManifest()：以 JavaScript 对象形式返回扩展的 manifest 文件。
• chrome.runtime.reload()：重新加载扩展。

示例：从内容脚本向后台脚本发送消息

内容脚本 (content.js)：

            chrome.runtime.sendMessage({message: "Hello from content script!"}, function(response) {
  console.log("Response from background script: ", response.message);
});

            

              
                Copy
              
            
          

后台脚本 (service-worker.js)：

            chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log("Message from content script: ", request.message);
    sendResponse({message: "Hello from background script!"});
  }
);

            

              
                Copy
              
            
          

2. chrome.storage

chrome.storage API 提供了一种在扩展中存储和检索数据的机制。它提供本地存储和同步存储选项。

关键方法：

• chrome.storage.local.set()：本地存储数据。
• chrome.storage.local.get()：从本地存储检索数据。
• chrome.storage.sync.set()：存储跨用户设备同步的数据。
• chrome.storage.sync.get()：从同步存储检索数据。

示例：在本地存储中存储和检索数据

            // Store data
chrome.storage.local.set({key: "value"}, function() {
  console.log("Value is set to " + "value");
});

// Retrieve data
chrome.storage.local.get(["key"], function(result) {
  console.log("Value currently is " + result.key);
});

            

              
                Copy
              
            
          

3. chrome.tabs

chrome.tabs API 允许扩展与浏览器标签页进行交互。它提供了创建、查询、修改和关闭标签页的方法。

关键方法：

• chrome.tabs.create()：创建一个新标签页。
• chrome.tabs.query()：查询与特定条件匹配的标签页。
• chrome.tabs.update()：更新标签页的属性。
• chrome.tabs.remove()：关闭一个标签页。
• chrome.tabs.executeScript()：在标签页中执行 JavaScript 代码。

示例：创建一个新标签页

            chrome.tabs.create({url: "https://www.example.com"}, function(tab) {
  console.log("New tab created with ID: " + tab.id);
});

            

              
                Copy
              
            
          

4. chrome.alarms

chrome.alarms API 允许扩展安排任务在特定时间或指定间隔后执行。这在 Manifest V3 中尤为重要，因为它取代了后台页面中使用计时器，而后台页面已不再受支持。

关键方法：

• chrome.alarms.create()：创建一个新闹钟。
• chrome.alarms.get()：检索现有闹钟。
• chrome.alarms.clear()：清除一个闹钟。
• chrome.alarms.getAll()：检索所有闹钟。
• chrome.alarms.onAlarm.addListener()：监听闹钟事件。

示例：创建一个闹钟

            chrome.alarms.create("myAlarm", {delayInMinutes: 1, periodInMinutes: 1});

chrome.alarms.onAlarm.addListener(function(alarm) {
  if (alarm.name === "myAlarm") {
    console.log("Alarm triggered!");
  }
});

            

              
                Copy
              
            
          

5. chrome.scripting

chrome.scripting API 允许扩展将 JavaScript 和 CSS 注入网页。此 API 是 Manifest V3 的关键组成部分，Service Worker 在加载网页后使用它来与网页交互。

关键方法：

• chrome.scripting.executeScript()：在标签页或框架中执行 JavaScript 代码。
• chrome.scripting.insertCSS()：将 CSS 插入标签页或框架。

示例：将 JavaScript 注入标签页

            chrome.scripting.executeScript({
  target: {tabId: tabId},
  function: function() {
    console.log("Injected script!");
    document.body.style.backgroundColor = 'red';
  }
});

            

              
                Copy
              
            
          

6. chrome.notifications

chrome.notifications API 允许扩展向用户显示通知。这对于提供更新、警报和其他重要信息非常有用。

关键方法：

• chrome.notifications.create()：创建一个新通知。
• chrome.notifications.update()：更新现有通知。
• chrome.notifications.clear()：清除一个通知。
• chrome.notifications.getAll()：检索所有通知。

示例：创建一个通知

            chrome.notifications.create('myNotification', {
  type: 'basic',
  iconUrl: 'icon.png',
  title: 'My Extension',
  message: 'Hello from my extension!'
}, function(notificationId) {
  console.log('Notification created with ID: ' + notificationId);
});

            

              
                Copy
              
            
          

7. chrome.contextMenus

chrome.contextMenus API 允许扩展向浏览器的上下文菜单（右键单击菜单）添加项目。这为用户提供了一种便捷的方式，可以直接从网页访问扩展功能。

关键方法：

• chrome.contextMenus.create()：创建一个新的上下文菜单项。
• chrome.contextMenus.update()：更新现有上下文菜单项。
• chrome.contextMenus.remove()：移除一个上下文菜单项。
• chrome.contextMenus.removeAll()：移除扩展创建的所有上下文菜单项。

示例：创建一个上下文菜单项

            chrome.contextMenus.create({
  id: "myContextMenuItem",
  title: "My Context Menu Item",
  contexts: ["page", "selection"]
}, function() {
  console.log("Context menu item created.");
});

chrome.contextMenus.onClicked.addListener(function(info, tab) {
  if (info.menuItemId === "myContextMenuItem") {
    console.log("Context menu item clicked!");
    alert("You clicked the context menu item!");
  }
});

            

              
                Copy
              
            
          

8. chrome.i18n

chrome.i18n API 用于国际化您的扩展，使其能够被不同语言和地区的用户访问。它使您能够提供扩展 UI 和消息的本地化版本。

关键方法：

• chrome.i18n.getMessage()：从扩展的 _locales 目录检索本地化字符串。

示例：使用 chrome.i18n 进行本地化

首先，在扩展的根文件夹中创建一个 _locales 目录。在其中，创建如 en、es、fr 等特定语言的文件夹。

在每个语言文件夹内，创建一个 messages.json 文件。例如，在 _locales/en/messages.json 中：

            {
  "extensionName": {
    "message": "My Extension",
    "description": "The name of the extension."
  },
  "greetingMessage": {
    "message": "Hello, world!",
    "description": "A simple greeting message."
  }
}

            

              
                Copy
              
            
          

然后在您的 JavaScript 代码中：

            let extensionName = chrome.i18n.getMessage("extensionName");
let greeting = chrome.i18n.getMessage("greetingMessage");
console.log(extensionName); // Output: My Extension
console.log(greeting);      // Output: Hello, world!

            

              
                Copy
              
            
          

跨浏览器兼容性

虽然 Chrome 是最流行的扩展开发浏览器，但考虑跨浏览器兼容性很重要。Firefox、Safari 和其他浏览器也支持扩展，但它们的 API 和 manifest 格式可能略有不同。

为确保跨浏览器兼容性：

• 使用 WebExtensions API：WebExtensions API 是一个标准化的浏览器扩展开发 API，得到多个浏览器支持。
• 在不同浏览器中进行测试：在不同浏览器中测试您的扩展，以识别并修复兼容性问题。
• 使用 polyfills：使用 polyfills 为不同浏览器中缺失的 API 功能提供支持。
• 条件代码：使用条件代码来适应特定于浏览器的差异。例如：if (typeof browser === "undefined") { var browser = chrome; }

浏览器扩展开发的最佳实践

以下是开发浏览器扩展时应遵循的一些最佳实践：

• 最小化权限：仅请求您的扩展绝对需要的权限。这可以增强用户隐私和安全性。
• 使用安全的编码实践：遵循安全的编码实践，以防止跨站点脚本 (XSS) 和代码注入等漏洞。
• 优化性能：优化扩展的性能，以最大程度地减少其对浏览器性能的影响。
• 提供清晰简洁的文档：提供清晰简洁的文档，以帮助用户理解如何使用您的扩展。
• 优雅地处理错误：实现错误处理，以防止您的扩展崩溃或导致意外行为。
• 保持扩展最新：定期更新您的扩展，以解决错误、安全漏洞和兼容性问题。
• 考虑国际化 (i18n)：设计您的扩展，使其易于本地化为不同的语言。使用 chrome.i18n API。
• 尊重用户隐私：透明地说明您的扩展如何收集和使用用户数据，并在必要时获得用户同意。遵守 GDPR 和 CCPA 等相关隐私法规。

将您的扩展提交到商店

开发和测试完扩展后，您需要将其提交到浏览器扩展商店，以便用户可以使用。每个浏览器都有自己的商店和提交流程：

• Chrome Web Store：将您的扩展提交到 Chrome Web Store，供 Chrome 用户使用。该过程包括创建开发者帐户，打包您的扩展，并将其上传到商店。
• Firefox Add-ons：将您的扩展提交到 Firefox Add-ons，供 Firefox 用户使用。该过程与 Chrome Web Store 类似，包括创建开发者帐户并提交您的扩展进行审核。
• Safari Extensions Gallery：将您的扩展提交到 Safari Extensions Gallery，供 Safari 用户使用。该过程包括从 Apple 获取开发者证书，并提交您的扩展进行审核。

提交扩展时，请务必提供准确完整的信息，包括描述性标题、详细说明、屏幕截图和隐私政策。扩展商店会审核提交内容，以确保它们符合其政策和准则。

结论

使用 Manifest V3 和 JavaScript API 进行浏览器扩展开发提供了一种强大的方式来定制和增强浏览体验。通过理解核心概念，遵循最佳实践，并考虑跨浏览器兼容性，开发者可以为全球用户创建有价值且引人入胜的扩展。随着 Web 的不断发展，浏览器扩展将在塑造互联网的未来方面继续发挥至关重要的作用。

请记住，在开发扩展时，始终要优先考虑用户隐私和安全。牢记这些原则进行构建，您可以创建既有用又值得信赖的扩展。

本指南为开始浏览器扩展开发提供了坚实的基础。随着您深入研究，探索可用的各种 API 和功能，并尝试不同的技术来创建创新且有影响力的扩展。